<template>
<div class="login">
<div class="login_content">
<div class="login_content1">

<div class="site-content">
  <!--  左边文字-->
  <div class="brand-info">
    <h2>基因检测系统</h2>
  </div>
<!--  右边表单-->
  <div class="login-main">
    <div class="login-title">
     <h3> 用户登录</h3>
      <el-form :model="form" :rules="rules" ref="ruleForm"  class="demo-ruleForm">
        <el-form-item prop="name" >
          <el-input v-model="form.name" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item  prop="name">
          <el-input v-model="form.password" placeholder="密码" autocomplete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item  prop="name">
          <el-input v-model="form.captcha" placeholder="验证码" style="width: 130px"  ></el-input>
           <img :src="uuid" alt="" @click="get_image_code" class="img1">
        </el-form-item>
        <el-form-item>
        <el-button @click="btn" class="btn">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</div>

</div>
</div>
</div>
</template>

<script>
import { getUUID } from '../utils/command'
import { Login } from '../api/Login'
export default {
  name: 'Login',
  data () {
    return {
      // 登陆表单数据
      form: {

      },
      // UUid
      UUID: '',
      uuid: '',
      // 验证码图片
      image_code: null,
      // 验证规则
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    this.get_image_code()
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 获取图片验证码
    get_image_code () {
      this.UUID = getUUID()
      this.uuid = 'http://8.142.74.15:9091/api/captcha.jpg?uuid=' + this.UUID
      console.log(this.UUID)
    },
    // 验证码检测
    // 获取文本框中输入的验证码，向后端发起请求验证验证码
    btn () {
      this.getlogin()
    },
    async getlogin () {
      let d = new Date().getTime()
      if (window.performance && typeof window.performance.now === 'function') {
        d += performance.now() // use high-precision timer if available
      }
      console.log(d)
      const data = {
        captcha: this.form.captcha,
        username: this.form.name,
        password: this.form.password,
        t: d,
        uuid: this.UUID
      }
      console.log(data)
      const { data: res } = await Login(data)
      if (res.code !== 0) return this.$message.error(`登录失败,原因：${res.meta.msg}`)
      // 在缓存中设置token
      sessionStorage.setItem('token', res.token)
      // 在缓存中设置id
      sessionStorage.setItem('username', data.username)
      await this.$router.push('/home')
      this.$message.success('登录成功')

      console.log(res)
    }
  }

}

</script>

<style scoped>
.btn{
  width: 100%;
  background-color: #17b3a3;
  color: #ffffff;
}

.login{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(38, 50, 56, 0.6);
  overflow: hidden;
  position: relative;
  min-width: 1180px;
  height: 762px;
}
.login:before {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  content: "";
  background-image: url(http://8.142.74.15:9091/2208010919/static/img/login_bg.213d054.jpg);
  background-size: cover;
}
.login_content{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  margin: 0;
  /*overflow-x: hidden;*/
  /*overflow-y: auto;*/
  background-color: transparent;
}
.login_content1{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  margin: 0;
  /*overflow-x: hidden;*/
  /*overflow-y: auto;*/
  background-color: transparent;
}
.site-content{
  min-height: 100%;
  padding: 30px 500px 30px 30px;
  position: relative;
}
.brand-info {
  margin: 220px 100px 0 90px;
  color: #fff;
}
.brand-info h2{
  margin: 0 0 22px 0;
  font-size: 48px;
  font-weight: 400;
  text-transform: uppercase;
}
.login-main {
  position: absolute;
  top: 0;
  right: 0;
  padding: 150px 60px 180px;
  width: 470px;
  min-height: 100%;
  background-color: #fff;
}
.login-main{
  font-size: 16px;
}

img {
  position: absolute;
  width: 120px;
  height: 40px;
  z-index: 999;
  left: 140px;
}
</style>
